<template>
    <div class="select-application">
        <div class="search">
            <el-input :placeholder="$t('common.base.search')" v-model="searchValue" clearable
                prefix-icon="el-icon-search">
            </el-input>
        </div>
        <!-- 选择应用 -->
        <div class="select-application-content" v-loading="loading">
            <el-menu mode="horizontal" class="sign-title" :default-active="selectedTab" @select="menuSelect">
                <el-menu-item key="system" index="system">内部应用</el-menu-item>
                <el-menu-item key="third" index="third" v-if="appList.thirdAppList">第三方应用</el-menu-item>
            </el-menu>
            <div class="title">
                选择应用
            </div>
            <div class="content">
                <div 
                    v-for="item in selectedTab == 'system' ? appList.systemAppList : appList.thirdAppList"
                    v-show="fuzzyMatching(searchValue, item.name)"
                    class="item"
                    :class="{'active': item.appId == state.currentNodeInfoFront.options.appId}"
                    :key="item.appId"  
                    @click="clickApp(item)" 
                >
                    <!-- 内部应用图标 -->
                    <i v-if="selectedTab == 'system'" class="iconfont" :class="item.logo"></i>
                    <!-- 第三方应用图标 -->
                    <img v-else-if="item.logo" :src="item.logo" class="iconfont" />
                    <div v-else class="iconfont">
                        <i>{{ item.name.substring(0, 2)}}</i>
                    </div>
                    <div class="app-name">{{ item.name }}</div>
                </div>
                <div v-if="selectedTab !== 'system'" class="tip">
                    <span class="mar-r-8">更多应用，可在集成中心配置</span>
                    <el-button type="text" @click="openIntegration">点击跳转</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAppList } from '@src/modules/trigger/api/trigger.js'
import state from '@src/modules/trigger/view/setting/util/state.js'

export default {
    name: 'SelectApplication',
    computed: {
        state() {
            return state;
        },
    },
    async created() {
        try {
            this.loading = true;
            const res = await getAppList();
            if (res.status === 0) {
                this.appList = res.data;
            } else {
                this.$message.error(res?.message);
            }
        } catch (error) {
            console.log(error);
        } finally {
            this.loading = false;
        }
    },
    data() {
        return {
            selectedTab: 'system', // 选中的应用类型 内部应用/第三方应用
            searchValue: '', // 搜索框的值
            appList: { // 应用类型的数据
                systemAppList: null, // 内部应用数据
                thirdAppList: null, // 第三方应用数据
            },
            loading: false,
        };
    },
    methods: {
        // 切换应用类型
        menuSelect(key) {
            this.selectedTab = key;
            this.searchValue = '';
        },
        // 选择应用
        clickApp(item) {
            if (item.appId == state.currentNodeInfoFront.options.appId) {
                this.$emit('clickApp');
                return;
            }
            this.searchValue = '';
            // 新增时特判一下，因为有可能有旧版的代码方式
			let fieldOptions = {};
			if (Object.keys(state.currentNodeInfoFront.options?.fieldOptions || {}).includes('convertCode')) {
				fieldOptions = { ...state.currentNodeInfoFront.options.fieldOptions };
				delete fieldOptions.insert;
			}
            this.$set(state.currentNodeInfoFront, 'options', {
                appId: item.appId,
                appName: item.name,
                appLogo: item.logo,
            });
            if (Object.keys(fieldOptions).length > 0) {
				this.$set(state.currentNodeInfoFront, 'options', {
					...state.currentNodeInfoFront.options,
					fieldOptions,
				})
			}
            this.$emit('clickApp');
        },
        openIntegration() {
            this.$platform.openTab({
                title: '集成中心',
                url: '/foundation/setting/develop/systemCenter',
            })
        },
        fuzzyMatching(target, item) {
            if (target.length > item.length) return false;
            let i = 0, j = 0;
            for (;j < item.length; j++) {
                if (target[i] === item[j]) {
                    i++;
                    if (i === target.length) {
                        return true;
                    }
                }
            }
            return !target;
        },
    }
};
</script>

<style lang="scss" scoped>
.active {
    border: 1px solid var(--color-primary-light-6) !important;
}
.select-application {
    height: calc(100% - 72px);
    padding: 16px 24px;

    ::v-deep .el-menu {
        margin-top: 16px;

        .el-menu-item {
            height: 40px;
            line-height: 40px;
        }
    }

    .select-application-content {
        height: calc(100% - 56px);
        .title {
            font-size: 14px;
            margin: 16px 0;
        }

        .content {
            max-height: calc(100% - 70px);
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;

            .item {
                height: 64px;
                width: 164px;
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                border-radius: 4px;
                border: 1px solid #E4E7ED;
                padding: 0 16px;
                margin-right: 16px;
                cursor: pointer;

                .iconfont {
                    width: 32px;
                    min-width: 32px;
                    height: 32px;
                    border-radius: 8px;
                    font-size: 18px;
                    background: var(--color-primary-light-1);
                    color: var(--color-primary-light-6);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 8px;
                    i {
                        font-size: 12px;
                        font-style: normal;
                    }
                }

                .app-name {
                    overflow:hidden;
                    word-wrap: break-word;
                    text-overflow:ellipsis;
                    display:-webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;  
                }
            }
            .tip {
                width: 100%;
            }
            .item:hover {
                border-color: var(--color-primary-light-6);
            }
        }
    }
}
</style>